A filled spline Line chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

<button onclick="accumulative = !accumulative; line.Set('filled.accumulative', accumulative); RGraph.Redraw();"> Toggle accumulative</button>

This is the code that generates the chart:

<script>
    var accumulative = true;

    window.onload = function ()
    {
        // A global on purpose
        line = new RGraph.Line({
            id: 'cvs',
            data: [ [4,5,1,6,3,8,2], [4,8,6,3,5,2,4] ],
            options: {
                gutterBottom: 35,
                shadow: false,
                spline: true,
                backgroundGrid: false,
                tickmarks: 'circle',
                linewidth: 5,
                hmargin: 5,
                labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                filled: true,
                filledAccumulative: accumulative,
                fillstyle: ['rgba(255,0,0,0.3)', 'rgba(0,255,0,0.3)','rgba(0,0,255,0.3)'],
                tooltips: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                textAccessible: true
            }
        }).draw();
    };
</script>